<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>首页</title>
  <!-- 1. 导入CSS的全局样式 -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  <script src="js/jquery-3.2.1.min.js"></script>
  <!-- 3. 导入bootstrap的js文件 -->
  <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
	    function deleteCar(shopid){
	    	//用户删除安全提示
	    	if(confirm("你确定删除吗？")){
	    		//访问路径
	    		location.href="${pageContext.request.contextPath}/delcarServlet?shopid="+shopid;
	    	}
	    }
	   $(function () {
	    $(".updateCount").change(function () {
	    	// 获取商品id
	    	var shopid = $(this).attr('shopid');
	    	// 获取商品数量
			var count = this.value;
	    	if(confirm("你确定要修改？")){
	    	    location.href="${pageContext.request.contextPath}/updateshopServlet?shopcount="+count+"&shopid="+shopid;
	    	}else{
	    		//表单项属性表示表单默认属性
	    		this.value=this.defaultValue;
	    	}
	    });
	    

		 	 
		  //1.获取第一个cb，判断第一个框框的状态，全选和全不选
    	    document.getElementById("firstCb").onclick = function(){
    	        //2.获取下边列表中所有的cb
    	        var cbs = document.getElementsByName("shopid");
    	        //3.遍历
    	        for (var i = 0; i < cbs.length; i++) {
    	        //4.设置这些cbs[i]的checked状态 = firstCb.checked
    	            cbs[i].checked = this.checked;
    	        }
    	    }
		 	 
		    document.getElementById("settlement").onclick = function(){
	    		if(confirm("选好了莽？确定去支付吗？")){
	    			var flag=false;
	    			//判断是否选中条目
	    			var cbs = document.getElementsByName("shopid");
	    			for (var i = 0; i < cbs.length; i++) {
	    				if(cbs[i].checked){
	    					//有一个条目选中
	    					flag=true;
	    					break;
	    				}
	    			}
	    			if(flag){
	    				document.getElementById("form").submit();
	    			}
	    		}
	    	}
	   });
    </script>
  
</head>
<body>
<!-- 固定导航条 -->
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%;">
  <div class="container-fluid ">
<!--     Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header ">
      <a class="navbar-brand" href="${pageContext.request.contextPath}/shopByPageServlet" style="width:140px;">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left" >
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#" >我的购物车</a></li>
         <li><a href="#">我的订单</a></li>
          <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav  navbar-right" >  
        <li><a href="#">${user.username}</a></li>
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
          <li><a href="#"></a></li>
           <li><a href="#">我的信息</a></li>
             <li><a href="#">我的收藏</a></li>
      </ul>
    </div>
  </div>
</nav>


<div class="jumbotron" style="height:175px;">
  <h1>${user.username},欢迎您</h1> <p>晚上好！</p>
 </div>

<c:choose>
    <c:when test="${empty cars }">
		<span class="spanEmpty">您的购物车中暂时没有商品</span>
	</c:when>
	<c:otherwise>
	<div style="width:90% ;height:100px; background:reds; margin:auto ;text-align:center" >
		<div class="page-header">
	 		 <h1>快来康康你的购物车吧! <small>！ ${user.username},的小车车</small></h1>
		</div>
		
	</div>



<form id="form" action="${pageContext.request.contextPath}/settlementServlet" method="post" style="width:80%;">
    <table border="1" class="table table-bordered table-hover">
         <tr class="success">         
            <th><input type="checkbox" id="firstCb"></th>
            <th>图片</th>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>单价/每份</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
         <c:forEach items="${cars}" var="car" varStatus="s">
            <tr>
            	<td><input type="checkbox" name=shopid value="${car.shopid}"></td>
            	 <td style="width:265px;height:180px;">
				<%--<img src="./${car.urls} " alt="商品图片" style="width:265px;height:180px;"> --%>
				      <img src="./${car.urls} " alt="商品图片" class="img-rounded"style="width:265px;height:180px;"></td>
                <td> <h5>${car.shopid}</h5></td>
                <td> <h5><p>${car.shopnames}</p></h5></td>
                <td> <h5>RMB:${car.prices}元</h5> </td>
                <td> <input class="updateCount" style="width: 80px;"
								   shopid="${car.shopid}"
								   type="text" value="${car.counts}">  </td>
		        <td> <h5>${car.subtotal}元</h5> </td>
                <td><a class="btn btn-default btn-sm" href="javascript:deleteCar(${car.shopid});">删除</a></td>
            </tr>
        </c:forEach>
		

    </table>
  </form>			

	<div style="width:1200px ;height:100px; margin:auto ;text-align:center; background:reds">
		<div style="margin:auto">
			<a href="javascript:void(0);" class="btn btn-primary btn-lg active" role="button" id="settlement">去结算</a>
		</div>
		<div>总件数为：${totalsum}件</div>
		<div>商品总计为：${totalprices}RMB</div>
	</div>
	</c:otherwise>
</c:choose>
</body>
</html>